<template>
    <div class="order_list">
        <!-- 单件 -->
        <div class="order_list_item" @click="detailsClick(orderData.id)">
            <div class="order_list_header">
                <div class="order_list_header_top">
                    <div class="order_member">
                        <text class="order_list_header_name">{{orderData.consignee}}</text>
                        <text class="order_list_header_name">{{orderData.phone}}</text>
                    </div>
                    <text class="order_list_header_title">{{orderData.address}}</text>
                </div>
                <text class="order_list_header_status">{{orderData.statusDescr}}</text>
            </div>
            <div class="order_list_content" v-if="orderData.itemList.length ==1" v-for="item in orderData.itemList">
                <div class="order_list_content_img mg-r20">
                    <image style="width:170px;height:170px" :src="item.thumbnail"></image>
                </div>
                <div class="order_list_content_box">
                    <div class="order_list_content_top">
                        <text class="order_list_content_name">{{item.name}}</text>
                        <text class="order_list_content_price">¥{{item.price | price}}</text>
                    </div>
                    <div class="order_list_content_bottom">
                        <text class="order_list_content_subtitle">{{item.spec}}</text>
                        <text class="order_list_content_number">x {{item.quantity | number}}</text>
                    </div>
                </div>
            </div>

            <div class="order_list_content" v-if="orderData.itemList.length >1">
                <div class="order_list_content_img mg-r20" v-if="index==0 || index==1"
                     v-for="(item,index) in orderData.itemList">
                    <image style="width:170px;height:170px" :src="item.thumbnail"></image>
                </div>
                <div class="order_list_content_more">
                    <text class="order_item_more_number">共计{{orderData.subQuantity | number}}件</text>
                    <icon class="order_item_icon" content="ios-arrow-forward"></icon>
                </div>
            </div>
            <div class="order_list_content_information">
                <text class="order_list_content_left">共计{{orderData.subQuantity | number}}件商品</text>
                <div class="order_price_box">
                    <text class="order_price_title">实付款：</text>
                    <text class="order_price_icon">¥</text>
                    <text class="order_price_number">{{orderData.amountPayable}}</text>
                </div>
            </div>
            <div class="order_list_botton">
				<div class="order_list_botton_red botton_Bg_Color mg-l20" @click="cancelClick" v-if="orderData.orderStatus !=3 && orderData.orderStatus !=2 && orderData.orderStatus !=4">
				    <text class="order_list_botton_red_title botton_Fz_Color">关闭订单</text>
				</div>
                <div class="order_list_botton_red botton_Bg_Color mg-l20" @click="returnsClick" v-if="orderData.paymentStatus == 1 && orderData.shippingStatus == 0 && orderData.orderStatus == 1">
                    <text class="order_list_botton_red_title  botton_Fz_Color">退货</text>
                </div>
                <div class="order_list_botton_red botton_Bg_Color mg-l20" @click="shipping" v-if="orderData.paymentStatus == 1 && orderData.shippingStatus == 0 && orderData.orderStatus == 1">
                    <text class="order_list_botton_red_title  botton_Fz_Color">发货</text>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    import {
        returns,cancel
    } from '../../api/order.js';
    const pay = app.requireModule("eeui/pay");
    export default {
        data() {
            return {}
        },
        props: [
            'orderData'
        ],
        filters: {
            price(value) {
                var toFixedNum = Number(value).toFixed(3);
                var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
                return realVal;
            },
            number(value) {
                var toFixedNum = Number(value).toFixed(0);
                return toFixedNum;
            }
        },
        methods: {
            detailsClick(id) {
                var _this = this
                console.log(id)
                eeui.openPage({
                        pageName: 'componentsOrder',
                        params: id,
                        url: 'root://pages/order/orderDetails.js',
                        statusBarType: 'immersion',
                        statusBarStyle: false
                    },
                    (result) => {
                        if (result.status == 'stop') {
                            storage.getItem('orderShipping', event => {
                                if (event.data == 'true') {
                                    _this.refreshClick()
                                }
                            })
                            storage.removeItem('orderShipping', event => {

                            })
                        }
                    }
                );
            },
            refreshClick() {
                this.$emit('refreshClick')
            },
            shipping() {
                if (this.checkPermission(['saleout.add']) == false) {
                    eeui.alert('您没有发货权限', function () {

                    });
                    return
                }
                var _this = this
                eeui.openPage({
                    url: 'root://pages/order/button/orderShipping.js',
                    params: _this.orderData.id,
                    statusBarType: 'immersion',
                    statusBarStyle: false
                }, result => {
                    if (result.status == 'stop') {
                        storage.getItem('orderShipping', event => {
                            if (event.data == 'true') {
                                _this.refreshClick()
                            }
                        })
                        storage.removeItem('orderShipping', event => {

                        })
                    }
                })
            },
            returnsClick() {
                if(this.checkPermission(['salein.add'])==false){
                    eeui.alert('您没有退货权限', function() {
                    });
                    return
                }
                var _this = this
                eeui.confirm({
                    title: "温馨提示",
                    message: "你确定退货吗？",
                    buttons: ["取消", "确定"]
                }, function(result) {
                    if (result.status == "click" && result.title == "确定") {
                        var itemList = []
                        returns(_this.orderData.id,JSON.stringify(itemList)).then(
                            res => {
                                console.log(res)
                                eeui.alert({
                                    title: '温馨提示',
                                    message: '提交成功,请到退款/售后完成退货',
                                }, function() {
                                    _this.refreshClick()
                                });
                            }
                        ).catch(error => {
                            // console.log(error)
                        })
                    }
                });
            },
			cancelClick(){
				var _this = this
				eeui.confirm({
				    title: "温馨提示",
				    message: "你确定关闭吗？",
				    buttons: ["取消", "确定"]
				}, function(result) {
				    if (result.status == "click" && result.title == "确定") {
				        var itemList = []
				        cancel(_this.orderData.id).then(
				            res => {
				                console.log(res)
				                eeui.alert({
				                    title: '温馨提示',
				                    message: '关闭成功',
				                }, function() {
				                    _this.refreshClick()
				                });
				            }
				        ).catch(error => {
				            // console.log(error)
				        })
				    }
				});
			}
        }
    }
</script>
<style lang="css" src="../../style/wx.css"/>
<style scoped>
    .order_list {
        width: 750px;
        padding-left: 25px;
        padding-right: 25px;
        box-sizing: border-box;
    }

    .order_list_item {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-top: 20px;
        padding: 20px;
        box-sizing: border-box;
    }

    .order_list_header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        width: 650px;
        /*height: 40px;*/
    }

    .order_list_header_top{
        width: 550px;
    }

    .order_list_header_title {
        font-size: 24px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        width: 550px;
        lines: 1;
        text-overflow: ellipsis;
        /*margin-right: 10px;*/
    }

    .order_list_header_name{
        font-size: 24px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        margin-right: 10px;
    }

    .order_list_header_status {
        font-size: 24px;
        font-weight: 400;
        color: rgba(215, 38, 28, 1);
    }

    .order_list_content {
        width: 650px;
        display: flex;
        flex-direction: row;
        margin-top: 42px;
        position: relative;
    }

    .order_list_content_img {
        width: 170px;
        height: 170px;
        background: rgba(250, 250, 250, 1);
        border-radius: 4px;
        overflow: hidden;
    }

    .order_list_content_box {
        display: flex;
        flex-direction: column;
    }

    .order_list_content_top {

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
    }

    .order_list_content_name {
        font-size: 28px;
        font-weight: 400;
        width: 380px;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        display: block;
        lines: 1;
        margin-bottom: 5px;
        text-overflow: ellipsis;
    }

    .order_list_content_price {
        font-size: 18px;
        font-weight: 400;

        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }

    .order_list_content_bottom {
        width: 460px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .order_list_content_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
        width: 380px;
        text-overflow: ellipsis;
        lines: 2;
    }

    .order_list_content_number {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .order_list_content_information {
        width: 650px;
        height: 40px;
        background: rgba(0, 0, 0, 0);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        margin-top: 40px;
    }

    .order_list_content_left {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .order_price_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }

    .order_price_icon {
        font-size: 20px;
        font-weight: 400;
        color: #eb594f;
        line-height: 36px;
    }

    .order_price_number {
        font-size: 24px;
        font-weight: 400;
        color: #eb594f;
        line-height: 36px;
    }

    .order_price_box {
        display: flex;
        flex-direction: row;
        align-items: center;
    }


    .order_list_content_more {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        right: -18px;
        height: 170px;
    }

    .order_item_icon {
        font-size: 36px;
        opacity: 0.3;
        width: 50px;
        height: 50px;
    }

    .order_item_more_number {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
    }

    .mg-l20 {
        margin-left: 20px;
    }

    .mg-r20 {
        margin-right: 20px
    }

    .order_list_botton {
        width: 650px;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        margin-top: 20px;
    }

    .order_list_botton_gray {
        width: 136px;
        height: 48px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(126, 128, 136, 0.8);
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 25px;
    }

    .order_list_botton_gray_title {
        font-size: 24px;
        font-weight: 400;
        line-height: 48px;
        color: rgba(26, 26, 30, 0.5);
    }


    .order_list_botton_red {
        width: 136px;
        height: 48px;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.8;
    }

    .order_list_botton_red_title {
        font-size: 24px;
        font-weight: 400;
        line-height: 48px;
    }
    .order_member{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
</style>
